<!--
    🚨🚨温馨提示🚨🚨
    下面代码是程序自动生成，可能存在个别无法运行，如果无法运行，请调整下echarts版本，或者自行浏览器查看报错信息进行修复；
    下面代码分为 echarts框架代码这个代码主要用于能运行起来echarts，还有就是核心代码（用🚨🚨非常重要🚨🚨进行标注了），核心代码主要用于显示案例效果
    如果有问题请打开社区网站 https://www.makeapie.cn 添加右上角微信群/qq群进行询问
-->
<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8" />
    <title>www.makeApie.cn - ECharts案例下载 - PieChart</title>
    <!--
        🚨🚨非常重要🚨🚨：设置相对路径资源url链接
        如果你需要本地使用，请下载下来，假设下面代码中有个相对路径资源 /dep/echarts/map/js/china.js，👉👉下载方法：https://www.makeapie.cn/dep/echarts/map/js/china.js
    -->
    <base href="https://www.makeapie.cn/">
    
    <!-- 引入刚刚下载的 ECharts 文件 和 jquery -->
    <script type="text/javascript" src="https://registry.npmmirror.com/echarts/4.8.0/files/dist/echarts.min.js"></script>
    <script type="text/javascript" src="https://registry.npmmirror.com/jquery/3.7.1/files/dist/jquery.min.js"></script>
    <style>*{padding: 0; margin: 0;}</style>
    
    <!--
        🚨🚨非常重要🚨🚨：下面是运行案例需要的第三方脚本，如果是相对链接，下载方法看上面👆👆
        如果你需要本地使用，请下载下来，假设下面代码中有个相对路径资源 /dep/echarts/map/js/china.js，下载方法：https://www.makeapie.cn/dep/echarts/map/js/china.js
    -->
    <!--暂无第三方脚本-->

    </head>
    <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="chart-panel" style="width: calc(100vw - 200px);height:calc(100vh - 200px); padding: 100px; margin: 0 auto;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart-panel'));
        // 指定图表的配置项和数据
        var option = {};

        //=============== start ===============//
        /**
         * 🚨🚨非常重要🚨🚨
         * 下面是 网站左侧代码，核心代码
         */
        
let index = 0;
var colorList = ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF'];

function fun() {
    var timer = setInterval(function() {
        console.log(index)
        myChart.dispatchAction({
            type: 'hideTip',
            seriesIndex: 0,
            dataIndex: index
        });
        // 显示提示框
        myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: index
        });
        // 取消高亮指定的数据图形
        myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: index == 0 ? 5 : index - 1
        });
        myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: index
        });
        index++;
        if (index > 5) {
            index = 0;
        }
    }, 3000)
}
fun()
option = {
    title: {
        text: 'PieChart',
        x: 'center',
        y: 'center',
        textStyle: {
            fontSize: 20
        }
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        type: 'pie',
        center: ['50%', '50%'],
        radius: ['24%', '45%'],
        clockwise: true,
        avoidLabelOverlap: true,
        hoverOffset: 30,
        emphasis:{
            itemStyle:{
                borderColor: '#f3f3f3',
                borderWidth: 20
            }
        },
        itemStyle: {
            normal: {
                color: function(params) {
                    return colorList[params.dataIndex]
                }
            }
        },
        label: {
            show: true,
            position: 'outside',
            formatter: '{a|{b}：{d}%}\n{hr|}',
            rich: {
                hr: {
                    backgroundColor: 't',
                    borderRadius: 3,
                    width: 3,
                    height: 3,
                    padding: [3, 3, 0, -12]
                },
                a: {
                    padding: [-30, 15, -20, 15]
                }
            }
        },
        labelLine: {
            normal: {
                length: 20,
                length2: 30,
                lineStyle: {
                    width: 1
                }
            }
        },
        data: [{
            'name': '北京',
            'value': 5600
        }, {
            'name': '上海',
            'value': 3600
        }, {
            'name': '广州',
            'value': 1500
        }, {
            'name': '深圳',
            'value': 2000
        }, {
            'name': '未知',
            'value': 899
        }, {
            'name': '海外',
            'value': 4000
        }],
    }]
};
        //=============== end ===============//
        
        // 使用刚指定的配置项和数据显示图表。
        if (option && typeof option === 'object') {
        myChart.setOption(option);
        }
        window.addEventListener('resize', myChart.resize);
    </script>
    </body>
</html>